import React, { useEffect, useState } from 'react'
import IconFont from './Tubiao';
import './css/fans.scss'
import { useNavigate } from 'react-router-dom';
import { Sticky, Tabs, Cell, Image, Button } from 'react-vant';
import axios from './Axios'
export default function Fans() {
    const navigate = useNavigate()
    const [fanlist, setfanlist] = useState([])
    const getfan = async () => {
        let { data } = await axios.get('/getuser')
        setfanlist(data.list[2].fans)
    }
    useEffect(() => {
        getfan()
    }, [])
    const xiusta = async (item) => {
        let { data } = await axios.post('/xiusta', item)
        console.log(data);
        if (data.code == 200) {
            getfan()
            console.log(23);
        }
    }
    const [sta, setsta] = useState(false)
    return (
        <div className='fansdiv'>
            <Sticky>
                <div className='top'>
                    <span className='icon' onClick={() => (navigate('/app/my'))}>
                        <IconFont name='icon-arrowLeft'></IconFont>
                    </span>
                    <span>关注/粉丝</span>
                </div>
            </Sticky>
            <div>
                <Tabs defaultActive={0} style={{ color: '#FF6262' }} type='line' color='#FF6262'>
                    <Tabs.TabPane title={`${'关注'} (${fanlist.filter(item => item.sta == true).length})`} >
                        {fanlist.filter(item=>item.sta==true).map(item => (
                            <Cell
                                key={item._id}
                                center
                                title={`Avatar ${item.nickname}`}
                                label={item.intro}
                                icon={<Image width={44} height={44} src='/demo_1.jpg' round />}
                                value={<Button size='small' onClick={() => (xiusta(item))}>{item.sta === true ? '已关注' : '关注'}</Button>}
                            />
                        ))}
                    </Tabs.TabPane>
                    <Tabs.TabPane title={`粉丝(${1})`} >
                        {fanlist.map(item => (
                            <Cell
                                key={item._id}
                                center
                                title={`Avatar ${item.nickname}`}
                                label={item.intro}
                                icon={<Image width={44} height={44} src='/demo_1.jpg' round />}
                                value={<Button size='small' onClick={() => (xiusta(item))}>{item.sta === true ? '已关注' : '回关'}</Button>}
                            />
                        ))}
                    </Tabs.TabPane>

                </Tabs>
            </div>
        </div>
    )
}
